<template>
		<view class="status-bar">
		</view>
		<uni-nav-bar left-icon="left" @clickLeft="leftback" :title="title" :border="false" :height="hig"
			class="header-title" />	
</template>

<script>
	import {
		ref
	} from 'vue'
	export default {
		props:['title'],
		setup(props,context) {
			const hig=ref('')
			// #ifdef MP-WEIXIN
			const getCapsule = () => {
				// 获取胶囊位置并改变顶部自定义导航栏的位置
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			
				//让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
				hig.value = (menuButtonInfo.top + menuButtonInfo.height) * 2 + 'rpx';
			}
			getCapsule()
			
			
			// #endif
			const leftback=()=>{
				context.emit('leftback')
			}
			return {hig,leftback}
		}
	}
</script>

<style lang="scss">
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		z-index: 998999;
	}

	.header-title {
		position: fixed;
		width: 100%;
		top: var(--status-bar-height);
		z-index: 998999;
	}
</style>
